<template>
  <div>
    <el-card>
      <!-- 查询区域 -->
      <div class="Orderselect">
        <!-- gutter间隔 栅格布局 搜查添加区域 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="订单号查询" name="first">
            <!-- gutter间隔 栅格布局 搜查添加区域 -->
            <el-row :gutter="10">
              <el-col :span="7">
                <!-- 输入框添加 @clear="getculturallist(0)"-->
                <el-input placeholder="请输入订单编号" v-model="orderNumber" clearable @clear="getOrder">
                  <el-button slot="append" icon="el-icon-search" @click="selectOrder()"></el-button>
                </el-input>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="多条件查询" name="second">
            <div class="mulselect">
              <el-row :gutter="10">
                <el-col :span="6">
                  <div class="userid">
                    <span>用户账号</span>
                    <el-input size="small" v-model="queryInfo.userId" placeholder="请输入用户id"></el-input>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="select">
                    <span>订单状态</span>
                    <el-select v-model="queryInfo.status" placeholder="请选择" size="mini">
                      <el-option
                        v-for="(item,index) in orderStatus"
                        :key="index"
                        :value="item.value"
                        :label="item.label"
                      ></el-option>
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="select">
                    <span>支付类型</span>
                    <el-select v-model="queryInfo.paymentType" placeholder="请选择" size="mini">
                      <el-option
                        v-for="(item,index) in paymentType"
                        :key="index"
                        :value="item.value"
                        :label="item.label"
                      ></el-option>
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="price">
                    <span>价格</span>
                    <el-input
                      size="small"
                      v-model.number="queryInfo.leftPayment"
                      placeholder="最低价格"
                    ></el-input>~
                    <el-input
                      size="small"
                      v-model.number="queryInfo.rightPayment"
                      placeholder="最高价格"
                    ></el-input>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="6">
                  <div class="selectTime">
                    <span>时间类型</span>
                    <el-select v-model="queryInfo.selectColumn" placeholder="请选择" size="mini">
                      <el-option
                        v-for="(item,index) in selectColumn"
                        :key="index"
                        :value="item.value"
                        :label="item.label"
                      ></el-option>
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="picker">
                    <span class="pickertime">时间选择</span>
                    <el-date-picker
                      v-model="formdate"
                      type="daterange"
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd hh:mm:ss"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      size="mini"
                    ></el-date-picker>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="search">
                    <el-button
                      size="mini"
                      type="primary"
                      icon="el-icon-search"
                      @click="searchPro"
                    >查询</el-button>
                    <el-button
                      icon="el-icon-refresh"
                      size="mini"
                      type="success"
                      @click="resetPro"
                    >重置</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 表格区域 -->
      <div class="Ordertable">
        <el-table :data="OrderList" stripe>
          <el-table-column prop="order.id" width="100px" label="订单id"></el-table-column>
          <el-table-column prop="order.orderNumber" width="100px" label="订单号"></el-table-column>
          <el-table-column prop="order.payment" width="100px" label="付款金额"></el-table-column>

          <el-table-column prop="username" width="100px" label="用户名"></el-table-column>
          <el-table-column prop="order.userId" width="100px" label="用户id"></el-table-column>
          <el-table-column prop="address.receiverName" width="100px" label="收件人"></el-table-column>
          <el-table-column prop="address.receiverMobile" width="110px" label="电话"></el-table-column>
          <el-table-column prop="order.status" width="100px" label="订单状态"></el-table-column>
          <el-table-column prop="order.sendTime" width="100px" label="发货时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-view" @click="detailDia(scope.row)">详情</el-button>
              <el-button type="text" icon="el-icon-edit" @click="EditDia(scope.row)">修改</el-button>
            </template>
          </el-table-column>

          <!-- <el-table-column type="index"></el-table-column> -->
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.current"
          :page-sizes="[5,10,30]"
          :page-size="queryInfo.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <el-dialog
        title="订单详情"
        :visible.sync="dedatilDialogVisible"
        width="60%"
        :before-close="handleClose"
      >
        <div class="Dialogdetail">
          <div class="orderdetail">
            <h2>订单信息</h2>
            <div>
              <span>订单id：</span>
              <span v-if="selectOrderdetail.order">{{selectOrderdetail.order.id}}</span>
            </div>
            <div>
              <span>订单号：</span>
              <span v-if="selectOrderdetail.order">{{selectOrderdetail.order.orderNumber}}</span>
            </div>
            <div>
              <span>付款金额：</span>
              <span
                class="moneystyle"
                v-if="selectOrderdetail.order"
              >￥{{selectOrderdetail.order.payment}}</span>
            </div>
            <div>
              <span>支付类型：</span>
              <span v-if="selectOrderdetail.order">{{selectOrderdetail.order.paymentType}}</span>
            </div>
            <div>
              <span>运费：</span>
              <span
                class="moneystyle"
                v-if="selectOrderdetail.order"
              >￥{{selectOrderdetail.order.postage}}</span>
            </div>
            <div>
              <span>订单状态：</span>
              <span v-if="selectOrderdetail.order">{{selectOrderdetail.order.status}}</span>
            </div>
            <div>
              <span>支付时间：</span>
              <span v-if="selectOrderdetail.order">{{selectOrderdetail.order.paymentTime}}</span>
            </div>
            <div>
              <span>发货时间：</span>
              <span v-if="selectOrderdetail.order">{{selectOrderdetail.order.sendTime}}</span>
            </div>
            <div>
              <span>交易完成时间：</span>
              <span v-if="selectOrderdetail.order">{{selectOrderdetail.order.endTime}}</span>
            </div>
            <div>
              <span>交易关闭时间：</span>
              <span v-if="selectOrderdetail.order">{{selectOrderdetail.order.closeTime}}</span>
            </div>
            <div>
              <span>交易创建时间：</span>
              <span v-if="selectOrderdetail.order">{{selectOrderdetail.order.createTime}}</span>
            </div>
            <div>
              <span>交易修改时间：</span>
              <span v-if="selectOrderdetail.order">{{selectOrderdetail.order.updateTime}}</span>
            </div>
          </div>
          <div class="orderListdetail">
            <div class="orderListdetailcontent">
              <h2>订单商品</h2>
              <div
                class="orderProduct"
                v-for="(item,index) in selectOrderdetail.orderItemList"
                :key="index"
              >
                <div>
                  <span>商品id：</span>
                  <span>{{item.productId}}</span>
                </div>
                <div>
                  <span>商品名称：</span>
                  <span>{{item.productName}}</span>
                </div>
                <div class="Productimg">
                  <img :src="imgUrl+item.productImage" alt />
                </div>
                <div>
                  <span>商品单价：</span>
                  <span class="moneystyle">￥{{item.currentUnitPrice}}</span>
                </div>
                <div>
                  <span>商品数量：</span>
                  <span>{{item.quantity}}</span>
                </div>
                <div>
                  <span>商品总价：</span>
                  <span class="moneystyle">￥{{item.totalPrice}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="orderaddrdetail">
            <h2>地址信息</h2>
            <div>
              <span>收件人：</span>
              <span v-if="selectOrderdetail.address">{{selectOrderdetail.address.receiverName}}</span>
            </div>
            <div>
              <span>电话：</span>
              <span v-if="selectOrderdetail.address">{{selectOrderdetail.address.receiverMobile}}</span>
            </div>
            <div>
              <span
                v-if="selectOrderdetail.address"
              >省：{{selectOrderdetail.address.receiverProvince}}/城市：{{selectOrderdetail.address.receiverCity}}/区：{{selectOrderdetail.address.receiverDistrict}}</span>
            </div>
            <div>
              <span>详细地址：</span>
              <span v-if="selectOrderdetail.address">{{selectOrderdetail.address.receiverAddress}}</span>
            </div>
            <div>
              <span>邮编：</span>
              <span v-if="selectOrderdetail.address">{{selectOrderdetail.address.receiverZip}}</span>
            </div>
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dedatilDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dedatilDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="订单修改"
        :visible.sync="editDialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <div class="editDialog">
          <!-- <span v-if="selectOrderdetail.order">{{selectOrderdetail.order.id}}</span> -->
          <div class="editstyle">
            <span>实际金额：</span>
            <el-input v-if="selectOrderdetail.order" v-model="selectOrderdetail.order.payment"></el-input>
          </div>
          <div class="editstyle">
            <span>运费：</span>
            <el-input v-if="selectOrderdetail.order" v-model="selectOrderdetail.order.postage"></el-input>
          </div>
          <div class="editstyle orderstaus">
            <span>订单状态：</span>
            <el-select
              v-if="selectOrderdetail.order"
              v-model="Editform.status"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="(item,index) in ordereditStatus"
                :key="index"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editPro">确定修改</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 查找tab页值
      activeName: 'first',
      imgUrl: 'https://phone-shop.oss-cn-beijing.aliyuncs.com/',
      dedatilDialogVisible: false,
      editDialogVisible: false,
      // 订单编号用于查询
      orderNumber: '',
      orderStatus: [
        { value: '', label: '全部' },
        { value: 0, label: '已取消' },
        { value: 1, label: '未付款' },
        { value: 2, label: '已付款' },
        { value: 3, label: '已发货' },
        { value: 4, label: '交易完成' },
        { value: 5, label: '交易失败' }
      ],
      ordereditStatus: [
        { value: 0, label: '已取消' },
        { value: 1, label: '未付款' },
        { value: 2, label: '已付款' },
        { value: 3, label: '已发货' },
        { value: 4, label: '交易完成' },
        { value: 5, label: '交易失败' }
      ],
      paymentType: [
        { value: 1, label: '支付宝' },
        { value: 2, label: '微信' }
      ],

      selectColumn: [
        { value: 1, label: '支付时间' },
        { value: 2, label: '发货时间' },
        { value: 3, label: '交易结束时间' },
        { value: 4, label: '交易关闭时间' },
        { value: 5, label: '订单创建时间' }
      ],
      // 订单时间
      formdate: '',
      // 修改提交
      Editform: {
        id: '',
        addressId: '',
        payment: '',
        postage: '',
        status: ''
      },
      // 订单数据
      OrderList: [],
      queryInfo: {
        userId: '',
        // 订单状态
        status: '',
        // 支付类型
        paymentType: '',
        // 左价格
        leftPayment: '',
        // 右价格
        rightPayment: '',
        // 控制价格查询
        paymentCondition: '',
        // 左时间
        leftTime: '',
        // 右时间
        rightTime: '',
        // 控制时间
        timeCondition: '',
        // 选中时间类型
        selectColumn: '',
        // 当前页数
        current: 1,
        // 当前每页显示多少条数据
        size: 5
      },
      // 选中商品信息
      selectOrderdetail: {},

      // 数据条数
      total: 0
    }
  },
  methods: {
    // 获取表单数据
    async getOrder () {
      const { data: res } = await this.$http.post(
        '/order/page',
        this.queryInfo
      )
      if (res.code !== 200) {
        return this.$message.error('获取订单信息失败')
      }
      const result = res.data
      this.total = result.total
      this.OrderList = result.list.map((item) => {
        if (item.order.status === 0) {
          item.order.status = '已取消'
        } else if (item.order.status === 1) {
          item.order.status = '未付款'
        } else if (item.order.status === 2) {
          item.order.status = '已付款'
        } else if (item.order.status === 3) {
          item.order.status = '已发货'
        } else if (item.order.status === 4) {
          item.order.status = '交易成功'
        } else {
          item.order.status = '交易失败'
        }
        item.order.createTime = this.timeStamp2String(item.order.createTime)
        item.order.updateTime = this.timeStamp2String(item.order.updateTime)
        if (item.order.endTime) {
          item.order.endTime = this.timeStamp2String(item.order.endTime)
        }
        if (item.order.closeTime) {
          item.order.closeTime = this.timeStamp2String(item.order.closeTime)
        }

        return item
      })
      console.log(this.OrderList)
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.queryInfo.size = val
      this.getOrder()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.queryInfo.current = val
      this.getOrder()
    },
    handleClick (tab, event) {
      // console.log(tab.$children.length)
      // this.queryInfo.pageSize = 10
      //   this.getculturallist(1)
    },
    // 订单编号查询
    async selectOrder () {
      const { data: res } = await this.$http.get('/order/one', {
        params: { orderNumber: this.orderNumber }
      })
      // console.log(res)
      if (res.code !== 200) {
        return this.$message.error('获取订单信息失败')
      }
      if (!res.data) {
        return this.$message.error('查无此订单号')
      }
      const result = res
      this.total = 1
      // this.OrderList = result
      console.log('订单号查询：', result)
      this.OrderList = []
      this.OrderList[0] = result.data
      console.log(this.OrderList[0])
      // console.log(this.OrderList)

      if (this.OrderList[0].order.status === 0) {
        this.OrderList[0].order.status = '已取消'
      } else if (this.OrderList[0].order.status === 1) {
        this.OrderList[0].order.status = '未付款'
      } else if (this.OrderList[0].order.status === 2) {
        this.OrderList[0].order.status = '已付款'
      } else if (this.OrderList[0].order.status === 3) {
        this.OrderList[0].order.status = '已发货'
      } else if (this.OrderList[0].order.status === 4) {
        this.OrderList[0].order.status = '交易成功'
      } else {
        this.OrderList[0].order.status = '交易失败'
      }

      console.log(result)
    },
    // 组合查询
    searchPro () {
      this.queryInfo.leftTime = ''
      this.queryInfo.rightTime = ''
      this.queryInfo.timeCondition = ''
      if (this.formdate) {
        console.log('选择了时间')
        this.queryInfo.leftTime = this.formdate[0]
        this.queryInfo.rightTime = this.formdate[1]
        this.queryInfo.timeCondition = 0
      }
      console.log(this.queryInfo.leftPayment)
      const leftPayment = this.queryInfo.leftPayment
      const rightPayment = this.queryInfo.rightPayment
      if (rightPayment === '' && leftPayment !== '') {
        return this.$message.info('请输入最高价格')
      }
      if (leftPayment === '' && rightPayment !== '') {
        return this.$message.info('请输入最低价格')
      }
      if (leftPayment !== '' && rightPayment !== '') {
        this.queryInfo.paymentCondition = 0
      }
      this.getOrder()
    },
    // 重置数据
    resetPro () {
      // this.searchForm = this.$refs.searchFormRef.form
      for (const key in this.queryInfo) {
        if (key !== 'current' && key !== 'size' && key !== 'selectColumn') {
          this.queryInfo[key] = ''
        }
      }

      this.formdate = ''
      // for (const key in this.searchForm) {
      //   this.searchForm[key] = ''
      // }
      // this.getProList()
    },
    // 关闭弹窗
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    detailDia (row) {
      console.log(row)

      if (row.order.paymentType === 1) {
        row.order.paymentType = '支付宝'
      } else {
        row.order.paymentType = '微信'
      }
      this.selectOrderdetail = row

      console.log(this.selectOrderdetail)
      this.dedatilDialogVisible = true
    },
    EditDia (row) {
      this.selectOrderdetail = row
      this.Editform.status = this.selectOrderdetail.order.status
      this.editDialogVisible = true
    },
    async editPro () {
      if (this.Editform.status === '已取消') {
        this.Editform.status = 0
      }
      if (this.Editform.status === '未付款') {
        this.Editform.status = 1
      }
      if (this.Editform.status === '已付款') {
        this.Editform.status = 2
      }
      if (this.Editform.status === '已发货') {
        this.Editform.status = 3
      }
      if (this.Editform.status === '交易成功') {
        this.Editform.status = 4
      }
      if (this.Editform.status === '交易失败') {
        this.Editform.status = 5
      }
      this.Editform.id = this.selectOrderdetail.order.id
      this.Editform.payment = this.selectOrderdetail.order.payment
      this.Editform.postage = this.selectOrderdetail.order.postage
      console.log(this.Editform)
      const { data: res } = await this.$http.post(
        '/order/update',
        this.Editform
      )
      if (res.code !== 200) {
        return this.$message.info('修改失败')
      } else {
        this.getOrder()
        this.editDialogVisible = false
        return this.$message.success('修改成功')
      }
    },
    timeStamp2String (time) {
      var dateee = time
      console.log(dateee)
      var date = new Date(+new Date(dateee) + 16 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, ' ')
        .replace(/\.[\d]{3}Z/, '')
      return date
    }
  },
  created () {
    this.getOrder()
    this.queryInfo.selectColumn = this.selectColumn[0].value
  }
}
</script>

<style lang="scss" scoped>
.Ordertable {
  margin-top: 20px;
}
.pagination {
  margin-top: 20px;
}
.mulselect {
  font-size: 13px;
  .el-row:nth-child(2) {
    margin-top: 15px;
  }
  .search {
    display: flex;
    align-items: center;
    // height: 40px;
  }
  .selectTime {
    display: flex;
    align-items: center;
    span {
      text-align: center;
      width: 80px;
    }
  }
  .userid,
  .select,
  .price,
  .picker {
    display: flex;
    align-items: center;
    span {
      width: 100px;
      text-align: center;
    }
    .pickertime {
      width: 90px;
    }
    /deep/.el-input .el-input__inner {
      height: 30px;
    }
    // /deep/.el-input__inner {
    //   height: 32px;
    //   line-height: 32px;
    // }
  }
}
.Dialogdetail {
  display: flex;
  max-height: 400px;

  .orderdetail,
  .orderListdetail,
  .orderaddrdetail {
    flex: 1;
    padding: 0 10px;
  }
  .orderListdetail {
    max-width: 300px;
    overflow: hidden;
    position: relative;
    .orderListdetailcontent {
      position: absolute;
      height: 300px;
      top: 0;
      left: 0;
      overflow-y: scroll;
      right: -17px;
    }
  }
  .orderListdetail .orderProduct {
    // border: 1px solid rgb(72, 255, 0);
    margin-top: 10px;
    .Productimg {
      width: 100px;
      height: 100px;
      img {
        width: 100px;
        height: 100px;
      }
    }
  }
}
.moneystyle {
  font-size: 20px;
  color: #f90;
}
.editDialog .editstyle {
  display: flex;
  align-items: center;
  min-width: 40%;
  max-width: 70%;
  width: 500px;
  margin-top: 20px;
  span {
    width: 150px;

    text-align: right;
  }
}
.editDialog .orderstaus {
  span {
    width: 105px;
  }
}
</style>
